<template>
  <div class="options">
    <el-dialog v-model="show" :append-to-body="true" :show-close="false"
      style="border-radius: 16px;  width: 870px;padding:0 20px;" :close-on-click-modal="false" class="dialog">
      <div class="title">Reply Feedback</div>
      <div class="question">
        <textarea class="content" maxlength="500" :value="props.params.data.text" disabled />
        <div class="imgs">
          <el-image class="img" :key="index" v-for="item, index in props.params.data.imgs" :src="item"
            :preview-src-list="props.params.data.imgs" :initial-index="index" preview-teleported />
        </div>
      </div>
      <div class="answer">
        <textarea class="content" maxlength="500" v-model="message.content" disabled />
      </div>
      <div class="tags">
        <el-tooltip effect="dark" :content="item.content" v-for="item in quickSettingList" :key="item.id"
          placement="top">
          <div :class="item.id == message.id?'tag-selected tag ':'tag'" @click="tab(item.content, item.title,item.id)">{{ item.title }}</div>
        </el-tooltip>
      </div>
      <div class="btns">
        <div class="btn cancel" @click="show = false">Cancel</div>
        <div class="btn ok" @click="submit">Ok</div>
      </div>
    </el-dialog>
    <div class="btn reply" @click="reply">Reply</div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { GetFeedback } from '@/vendors/feedback/feedback';
import useSettingStore from '@/vendors/store/setting'
import { GetQucikSetting } from '@/vendors/quickSetting/quickSetting'
const props = defineProps({
  params: {
    type: Object as () => any, // 修改/删除操作携带的参数 如table_id
    required: true,
  },
  updateFunc: {
    type: Function, // 修改/删除操作携带的参数 如table_id
    default: () => { }
  }
})
const message = ref({
  id:0,
  content: '',
  title: '',
})
const {
  quickSettingList,
  getList
} = GetQucikSetting()

const {
  feedbackResponse
} = GetFeedback()
const show = ref(false)
const setting = useSettingStore()
const submit = () => {
  feedbackResponse(message.value.content,props.params.data.book_id,message.value.title, () => {
    // setting.setFeedbackCount(setting.count[4].num - 1)
    show.value = false
    props.updateFunc.apply(null)
  })
}
const tab = (msg: string, title: string,id:number) => {
  message.value.id = id
  message.value.content = msg
  message.value.title = title
}
const reply = () => {
  getList()
  show.value = true
}
</script>
<style scoped lang="scss">
.options {
  display: flex;
  justify-content: center;

  .btn {
    width: 136px;
    line-height: 48px;
    border-radius: 12px;
    font-family: Montserrat;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0em;
    text-align: center;
    cursor: pointer;
  }

  .reply {
    cursor: pointer;
    color: white;
    background: rgba(0, 132, 255, 1);
  }
}

.title {
  font-family: Montserrat;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0em;
  text-align: center;
}

.content {
  width: 100%;
  border-radius: 8px;
  border: 0;
  margin: 5px;
  resize: none;
  background: none;
  border: 0;
}

.question {
  margin: 48px 0 24px 0;
  display: flex;
  background: rgba(132, 131, 131, 0.1);

  .imgs {
    height: 178px;
    margin-right: 12px;
    overflow-y: scroll;
    text-align: center;
    overflow-x: hidden;

    .img {
      border-radius: 8px;
      width: 48px;
      height: 48px;
      display: block;
      margin: 0 auto;
      margin-top: 12px;
    }
  }
}

.btns {
  display: flex;
  justify-content: center;
}

.question,
.answer {
  height: 184px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);

}

.answer {
  .content {
    width: 98.5%;
    height: 92%;
    background: white;
  }
}

.btn {
  width: 300px;
  line-height: 48px;
  border-radius: 12px;
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0em;
  text-align: center;
}

.cancel {
  margin-right: 48px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(250, 74, 130, 1);
  cursor: pointer;
}

.ok {
  color: white;
  background: rgba(0, 132, 255, 1);
  cursor: pointer;
}

.tags {
  margin: 36px 0 48px 0;
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  overflow-y: hidden;

  .tag {
    width: 158px;
    line-height: 48px;
    border-radius: 48px;
    background: rgba(217, 217, 217, 0.3);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    margin-right: 16px;
    text-align: center;
    padding: 0 30px;
    cursor: pointer;
  }
    .tag-selected {
        background: rgba(0, 132, 255, .5);
        color:white;
  }

  .tag:nth-last-child(1) {
    margin-right: 0;
  }
}

::-webkit-scrollbar {
  height: 8px;
}

::deep .el-textarea__inner {
  border-radius: 10px !important;
}

</style>